﻿@model IList<MvcApp.Models.Calculation>

@{
	ViewBag.Title = "SlickGrid";
}
@section HeaderIncludes
{
	<link rel="stylesheet" type="text/css" href="@Url.Content("~/Content/slick-default-theme.css")" />
	<link rel="stylesheet" type="text/css" href="@Url.Content("~/Content/slick.grid.css")" />
	<script type="text/javascript" src="@Url.Content("~/Scripts/SlickGridExt/Formatters/slick.formatters.dropdownlist.js")"></script>
}

<h2>SlickGrid</h2>

@section scripts
{

	@Scripts.Render("~/bundles/slickgrid")
	<script type="text/javascript" language="javascript">
		(function($) {
			$.extend(true, window, {
				'Slick': {
					'Formatters': {
						'DropDownList': DropDownListFormatter
					}
				}
			});
		})(jQuery);

		var datatypes = @Html.Raw(ViewBag.Datatypes);

		var data = @Html.Raw(ViewBag.CalcData);

		var columns = [
			{ name: "Name", field: "Name", id: "name" },
			{ name: "Mnemonic", field: "Mnemonic", id: "mnemonic" },
			{ name: "Data type", field: "DatatypeId", id: "datatype", editor: Slick.Editors.DropdownList, formatter: Slick.Formatters.DropDownList, options: datatypes },
			{ name: "Clause", field: "Clause", id: "clause" }
		];

		var options = { enableColumnReorder: false, enableCellNavigation: true, autoHeight: true, editable: true };
		var grid;
		$(function() {
			grid = new Slick.Grid("#grid", data, columns, options);
		});

	</script>
}
<div>Table initialised <b>without</b> SlickGrid.Net</div><br />
<div id="grid"></div>
<div style="clear: both;"></div>

